<template>
  <div v-loading="loading" class="index">
    <div v-show="!view" class="act-bar">
      <CAFileCancel :documentCode="data.type" moduleCode="nursingDocument" />
      <el-button v-has="'nursingDoc:export'" type="primary" @click="dzblUpload"
        >电子病历归档</el-button
      >
      <el-button
        v-has="'nursingDoc:export'"
        type="primary"
        @click="signWithoutApperance"
        >CA认证</el-button
      >
      <el-button
        v-has="'nursingDoc:export'"
        class="my-btn"
        @click="handleOutput"
        >导 出</el-button
      >
      <el-button v-has="'nursingDoc:export'" v-print="printConf" class="my-btn"
        >打 印</el-button
      >
    </div>
    <div class="multi-container">
      <div id="printDom" ref="printDom" class="printMain">
        <div class="doc-container">
          <MainPage :patCur="patCur" :data="data" />
        </div>
        <div class="doc-container">
          <MainPage2 :patCur="patCur" :data="data" />
        </div>
        <!-- <div class="doc-container">
          <MainPage3 :patCur="patCur" :data="data" />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  nextTick,
  reactive,
  toRefs,
  watch
} from 'vue'

import CAFileCancel from '@/components/CAFileCancel/index.vue'
import { useCA } from '@/hooks'
import {
  getElementFnFromInstance,
  getStoreFromInstance
} from '@/utils/instance'

import { useDocExport } from '../../hooks'
import MainPage from './mainPage.vue'
import MainPage2 from './mainPage2.vue'
import MainPage3 from './mainPage3.vue'

export default defineComponent({
  components: {
    MainPage,
    MainPage2,
    MainPage3,
    CAFileCancel
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    view: {
      type: Boolean,
      default: false
    }
  },
  emits: ['setCanOperate'],
  setup(props, { emit }) {
    const state = reactive({
      printConf: {
        id: 'printDom',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {}, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: ''
      },
      form: { jsonText: '{}' },
      recordData: [],
      loading: false,
      printDom: {}
    })

    const { handleDocExport } = useDocExport()
    const { $notify } = getElementFnFromInstance()
    const store = getStoreFromInstance()
    const CA = useCA()

    const patCur = computed(() => store.getters.patCur)

    function returnDom() {
      return [state.printDom]
    }

    function handleOutput() {
      state.loading = true
      setTimeout(() => {
        handleDocExport(state.printDom, '', props.data.title + '.pdf', () => {
          state.loading = false
        })
      }, 500)
    }

    function signWithoutApperance() {
      state.loading = true
      CA.signWithoutApperance(
        state.printDom,
        '',
        props.data.title + '.pdf',
        'nursingDocument',
        props.data.type,
        () => {
          state.loading = false
        }
      )
    }

    function dzblUpload() {
      state.loading = true
      CA.dzblUpload(
        state.printDom,
        '',
        props.data.title + '.pdf',
        'nursingDocument',
        props.data.type,
        () => {
          state.loading = false
        }
      )
    }

    return {
      ...toRefs(state),
      patCur,
      returnDom,
      handleOutput,
      signWithoutApperance,
      dzblUpload
    }
  }
})
</script>

<style scoped lang="scss">
.index {
  height: calc(100% - 15px);

  .act-bar {
    margin-bottom: 10px;
    padding: 9px 10px;
    text-align: right;
    border-bottom: 1px solid #f2f4f5;
  }

  .multi-container {
    height: calc(100% - 30px);
    padding-bottom: 30px;
    overflow-y: auto;
    display: block;
  }
}

#printDom {
  width: 840px;
  margin: 0 auto;
}

.doc-container {
  margin: 0 auto;
  width: 840px;
  height: 1188px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  padding: 40px;
}
</style>
